<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html >
<html>
<head>

<script type="text/javascript" src="jsutil/jscharts.js"></script>
</head>




<body >
<div id="JScharts_div"></div>

	<div id="outside_div">
		
		<form id="day_search" onsubmit="return navTabSearch(this);" action="dayChartsAction.action?toResult=getDayData&rightId=${rightId}" method="post">
			<div class="pageHeader">
				<input type="hidden" name="init" value=0>
				<div class="searchBar">
					<table class="searchContent">
						<tr>
							<td>年份: 
							<c:set value="${year}" var="selectYear" />
							<select id="year" name="year">
							<!-- 显示年份列表 -->
							<c:forEach var="years" items="${listyear}">								
								<c:if test="${years==selectYear}">
								<option  value="${years}" selected="selected">${years}</option>		
								</c:if>
								<c:if test="${years!=selectYear }">
								<option value="${years}">${years}</option>		
								</c:if>					
							</c:forEach> 
							</select>
							</td>
							<td>月份: 
							<select name="month">
							<s:if test="#request.month !=1">
									<option  value="1" >1月</option></s:if> 
							<s:elseif test="#request.month ==1">
								<option  value="1" selected="selected">1月</option></s:elseif>	
							<s:if test="#request.month !=2">
									<option  value="2" >2月</option></s:if> 
							<s:elseif test="#request.month ==2">
								<option  value="2" selected="selected">2月</option></s:elseif>					
							<s:if test="#request.month !=3">
									<option  value="3" >3月</option></s:if> 
							<s:elseif test="#request.month ==3">
								<option  value="3" selected="selected">3月</option></s:elseif>	
							<s:if test="#request.month !=4">
									<option  value="4" >4月</option></s:if> 
							<s:elseif test="#request.month ==4">
								<option  value="4" selected="selected">4月</option></s:elseif>									
							<s:if test="#request.month !=5">
									<option  value="5" >5月</option></s:if> 
							<s:elseif test="#request.month ==5">
								<option  value="5" selected="selected">5月</option></s:elseif>									
							<s:if test="#request.month !=6">
									<option  value="6" >6月</option></s:if> 
							<s:elseif test="#request.month ==6">
								<option  value="6" selected="selected">6月</option></s:elseif>									
							<s:if test="#request.month !=7">
									<option  value="7" >7月</option></s:if> 
							<s:elseif test="#request.month ==7">
								<option  value="7" selected="selected">7月</option></s:elseif>									
							<s:if test="#request.month !=8">
									<option  value="8" >8月</option></s:if> 
							<s:elseif test="#request.month ==8">
								<option  value="8" selected="selected">8月</option></s:elseif>									
							<s:if test="#request.month !=9">
									<option  value="9" >9月</option></s:if> 
							<s:elseif test="#request.month ==9">
								<option  value="9" selected="selected">9月</option></s:elseif>									
							<s:if test="#request.month !=10">
									<option  value="10" >10月</option></s:if> 
							<s:elseif test="#request.month ==10">
								<option  value="10" selected="selected">10月</option></s:elseif>									
							<s:if test="#request.month !=11">
									<option  value="11" >11月</option></s:if> 
							<s:elseif test="#request.month ==11">
								<option  value="11" selected="selected">11月</option></s:elseif>									
							<s:if test="#request.month !=12">
									<option  value="12" >12月</option></s:if> 
							<s:elseif test="#request.month ==12">
								<option  value="12" selected="selected">12月</option></s:elseif>	
													
							</select>
							</td>

							<td>快递公司: 
							<c:set value="${expressCompany}" var="company" />
							<select id="Charts_company" name="expressCompany">
							<option  value="all" >所有公司</option>
							
							<!-- 当选择分开显示时，分开显示被select 其他只显示 -->
							<s:if test="#request.expressCompany !='allpart'">
									<option  value="allpart" >分开显示</option></s:if> 
							<s:elseif test="#request.expressCompany =='allpart'">
								<option  value="allpart" selected="selected">分开显示</option></s:elseif>							
						
							<!-- 显示快递公司列表 -->
							<c:forEach var="companyItem" items="${listExpressCompany}">								
								<c:if test="${companyItem.name==company}">
								<option  value="${companyItem.name}" selected="selected">${companyItem.name}</option>		
								</c:if>
								<c:if test="${companyItem.name!=company }">
								<option value="${companyItem.name}">${companyItem.name}</option>		
								</c:if>	
										
							</c:forEach> 

							</select>
							</td>
							
							<!--状态列表  -->
							<td>订单状态: 
							<select name="orderStatus" id="order_Status">
							<s:if test="#request.orderStatus !='all'">
								<option  value="all">所有订单</option></s:if> 
							<s:elseif test="#request.orderStatus =='all'">
								<option  value="all" selected="selected">所有订单</option></s:elseif>		
							<s:if test="#request.orderStatus !='availOrders'">
								<option  value="availOrders">有效订单</option></s:if> 
							<s:elseif test="#request.orderStatus =='availOrders'">
								<option  value="availOrders" selected="selected">有效订单</option></s:elseif>	
							<s:if test="#request.orderStatus !='NETSITE_CANCELLED_MENDACIOUS'">
								<option  value="NETSITE_CANCELLED_MENDACIOUS">虚假订单</option></s:if> 
							<s:elseif test="#request.orderStatus =='NETSITE_CANCELLED_MENDACIOUS'">
								<option  value="NETSITE_CANCELLED_MENDACIOUS" selected="selected">虚假订单</option>	</s:elseif>	
								<s:if test="#request.orderStatus !='CANCELLED'">
								<option  value="CANCELLED">取消订单</option></s:if> 
							<s:elseif test="#request.orderStatus =='CANCELLED'">
								<option  value="CANCELLED" selected="selected">取消订单</option>	</s:elseif>								
							</select>
							
							<!--订单类型  -->
							<td>订单类型: 
							<select name="orderType" id="order_Type">	
							<s:if test="#request.orderType !='baseOrder'">
								<option  value="baseOrder">大订单</option></s:if> 
							<s:elseif test="#request.orderType =='baseOrder'">
								<option  value="baseOrder" selected="selected">大订单</option></s:elseif>	
							<s:if test="#request.orderType !='orderItem'">
								<option  value="orderItem">小订单</option></s:if> 
							<s:elseif test="#request.orderType =='orderItem'">
								<option  value="orderItem" selected="selected">小订单</option>	</s:elseif>								
							</select>
							
							</td>
							
							<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
							<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
							<td>
								<div class="buttonActive">
									<div class="buttonContent">
										<button type="submit">曲线图</button>
									</div>
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</form>
			<div class="pageContent"  >
	
				<div class="panelBar">
					<ul class="toolBar">

					</ul>
				</div>
			</div>
			<div style="width:2000px;">
			<div style="float:left; width:1500;">
			<div id="chart_container_day">Loading chart...</div>
				<input id="JScharts_data" type="hidden" name="data" value="${data}">								
	
			<script type="text/javascript">
			
			var myChart = new JSChart('chart_container_day', 'line', '');			
/* 			//List解析
			var data=eval(${data});		
		 	var array=new Array();	
		 	   var list=${data};     
		    for(var i=0;i<data.length;i++){
		       var arr=new Array();
		       arr[0]=list[i].width;
		       arr[1]=list[i].height;
		       array[i]=arr;
		    }  */
		    //map解析
		    var map=eval(${data});		   
		 	var i=0;

 		    if("allpart"=="${expressCompany}")
		    {
		    	for(var key in map) {
		    		var itemmap=map[key];
		    		array.length=0;
		    		i=0;
		    	    var arrayList=new Array();
			 		for(var itemkey in itemmap){			 			
			 			var arr=new Array();
				        arr[0]=itemkey;
				        arr[1]=itemmap[itemkey];
				        arrayList[i]=arr; 
				       // myChart.setTooltip(arr);
				        i++;
			 		}
			 		myChart.setDataArray(arrayList,key);
			 		if("中通快递"==key){
						myChart.setLineColor('#CA107C',key);
					}else if("圆通快递"==key){
						myChart.setLineColor('#3300FF',key);
					}else if("顺丰快递"==key){
						myChart.setLineColor('#33B9D7',key);
					}else if("韵达快递"==key){
						myChart.setLineColor('#FBE000',key);
					}else if("申通快递"==key){
						myChart.setLineColor('#993333',key);
					}
			    }  		 	
		    }else
		    {
			 	var array=new Array();
		    	//循环map设定数据点
			 	for(var key in map) {   		
			 		var arr=new Array();
			        arr[0]=key;
			        arr[1]=map[key];
			        array[i]=arr; 
			        myChart.setTooltip(arr);
			        i++;
			    }  		 	
				//var arrayData=new Array( [61, 10], [91, 30], [122, 110], [155, 15], [186, 45], [217, 25], [247, 22], [276, 33], [306, 50], [336, 73], [365, 45]);
				myChart.setDataArray(array);	
				myChart.setLineColor('#FF00FF');
				if("all"=="${expressCompany}"){
					myChart.setLineColor('#D92323');
					}
				else if("中通快递"=="${expressCompany}"){
					myChart.setLineColor('#CA107C');
				}else if("圆通快递"=="${expressCompany}"){
					myChart.setLineColor('#3300FF');
				}else if("顺丰快递"=="${expressCompany}"){
					myChart.setLineColor('#33B9D7');
				}else if("韵达快递"=="${expressCompany}"){
					myChart.setLineColor('#FBE000');
				}else if("申通快递"=="${expressCompany}"){
					myChart.setLineColor('#993333');
				}
		    }	  	
		   
			myChart.setSize(1200, 500);	
 			myChart.setAxisColor('#B7C611');//设置两轴的颜色
			myChart.setGridColor('#B7C611');//设置网格的颜色
			myChart.setAxisPaddingLeft(50);
			myChart.setAxisPaddingBottom(50);
			myChart.setAxisPaddingTop(100);
			myChart.setAxisPaddingRight(100); 

			//myChart.setTooltip([0,'180']);//可圈出这个点
			myChart.setAxisValuesNumberY(5);//Y轴节点数（例如：Y轴数值最大值200，节点数5 则节点为0，50，100,150,200）
		//	myChart.setAxisValuesNumberX(12);
			myChart.setTitle(${year}+'-'+${month}+' orders count');
			myChart.setTitleFontSize(30);//设置title字体大小
			myChart.setTitleColor('#00CCCC');
			myChart.setIntervalStartY(0);//设置Y轴从0开始，如果不设置从最小值画
			myChart.setAxisNameX('day');//X轴name
			myChart.setAxisNameY('OrdersNum');//Y轴name
			myChart.setAxisNameFontSize(15);//轴name的大小
			myChart.setAxisNameColor('#00CCCC');//轴name的颜色
			myChart.setAxisValuesColor('#FF00FF');//轴值得颜色
			myChart.setShowXValues(false);//是否显示X轴数值
			//myChart.setIntervalEndY(150);//设置Y轴的最大值
			//myChart.setIntervalStartY(2);//设置Y轴的最小值
			//myChart.setIntervalEndX();
			//myChart.setAxisWidth(10); //设置两轴的线的宽度
			
			for (var int = 0; int <=${days}; int++) {
				myChart.setTooltip([int,'']);
				myChart.setLabelX([int,int]);
			}
			/* myChart.setTooltip([0,'']);
			myChart.setTooltip([1,'']);
			myChart.setTooltip([2,'']);
			myChart.setTooltip([3,'']);
			myChart.setTooltip([4,'']);
			myChart.setTooltip([5,'']);
			myChart.setTooltip([6,'']);
			myChart.setTooltip([7,'']);
			myChart.setTooltip([8,'']);
			myChart.setTooltip([9,'']);
			myChart.setTooltip([10,'']);
			myChart.setTooltip([11,'']);
			myChart.setTooltip([12,'']);
			
		 	myChart.setLabelX([0,'0']);
			myChart.setLabelX([1,'1']);
			myChart.setLabelX([2,'2']);
			myChart.setLabelX([3,'3']);
			myChart.setLabelX([4,'4']);
			myChart.setLabelX([5,'5']);
			myChart.setLabelX([6,'6']);
			myChart.setLabelX([7,'7']);
			myChart.setLabelX([8,'8']);
			myChart.setLabelX([9,'9']);
			myChart.setLabelX([10,'10']);
			myChart.setLabelX([11,'11']);
			myChart.setLabelX([12,'12']);	  */
			myChart.draw();	

			</script>  			
				</div>
			<div style="float:left; width:500px;">
					<div style="width:100px;height:19px;margin-top:120px;background:#D92323">  全部</div>
					<div style="width:100px;height:19px;margin-top:2px;background:#CA107C">  中通快递</div>
					<div style="width:100px;height:19px;margin-top:2px;background:#3300FF">  圆通快递</div>
					<div style="width:100px;height:19px;margin-top:2px;background:#33B9D7">  顺丰快递</div>
					<div style="width:100px;height:19px;margin-top:2px;background:#FBE000">  韵达快递</div>
					<div style="width:100px;height:19px;margin-top:2px;background:#993333">  申通快递</div>
					<div style="width:100px;height:19px;margin-top:2px;background:#FF00FF">  其他</div>					
			</div>
			</div> 
	
			
	</div>
	</body>

</html>